<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.filter['user.nickname']"
        placeholder="请输入用户名"
        style="width: 200px;"
        col="6"
      ></el-input>

      <el-input
        v-model="listQuery.filter['house.house_no']"
        placeholder="请输入房屋编号"
        style="width: 200px;"
        col="6"
      ></el-input>

      <el-date-picker
        v-model="dateRange"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="到期开始日期"
        end-placeholder="到期结束日期"
        align="right"
      ></el-date-picker>

      <el-select v-model="listQuery.filter['user_house.type_id']" clearable placeholder="请选择类型">
        <el-option
          v-for="item in formSelections.types"
          :key="item.id"
          :label="item.title"
          :value="item.id"
        ></el-option>
      </el-select>

      <el-select v-model="listQuery.filter['user_house.check_out']" clearable placeholder="请选择状态">
        <el-option
          v-for="item in formSelections.check_out"
          :key="item.id"
          :label="item.title"
          :value="item.id"
        ></el-option>
      </el-select>

      <el-button type="primary" @click="searchData">查询</el-button>
    </div>

    <el-table
      :data="list"
      border
      style="width: 100%"
      v-loading="listLoading"
      fit
      highlight-current-row
    >
      <el-table-column fixed prop="id" label="id" width="100"></el-table-column>
      <el-table-column prop="house.house_no" label=" 房屋编号" min-width="100"></el-table-column>
      <el-table-column prop="user.nickname" label=" 用户名" min-width="100"></el-table-column>
      <el-table-column prop="user.phone" label=" 手机号码" min-width="100"></el-table-column>
      <el-table-column prop="manager_name" label=" 管家名称" min-width="100"></el-table-column>
      <el-table-column prop="refund_time" label=" 预约退房时间" min-width="100"></el-table-column>
      <el-table-column prop="type_id" label=" 类型" min-width="120">
        <template slot-scope="scope">{{ statusFormat(scope.row.type_id)}}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <template v-if="listQuery.filter['user_house.check_out'] && listQuery.filter['user_house.check_out'] !== 2">
            <el-button type="text" size="small" @click="openDialog(scope.row)">退 房</el-button>
          </template>
          <template v-else>
            <el-button type="text" size="small" @click="openDialog(scope.row)">查 看</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="total"
      :page="page"
      :limit="listQuery.limit"
      :pageSizes="pageSizes"
      @pagination="pageChange"
    ></pagination>

    <el-dialog :title="dialogTitle" :visible.sync="formDialogIsVisible">
      <el-form :model="formData" label-width="80px">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基本信息" name="first">
            <el-form-item label="用户名" v-if="formData.user !== undefined">
              <el-input
                v-model="formData.user.nickname"
                autocomplete="off"
                :disabled="true"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>

            <el-form-item label="电话号码" v-if="formData.user !== undefined">
              <el-input
                v-model="formData.user.phone"
                autocomplete="off"
                :disabled="true"
                placeholder="请输入电话号码啊"
              ></el-input>
            </el-form-item>

            <el-form-item label="用户昵称" v-if="formData.user !== undefined">
              <el-input
                v-model="formData.user.nickname"
                autocomplete="off"
                :disabled="true"
                placeholder="请输入昵称"
              ></el-input>
            </el-form-item>

            <el-form-item label="管家名称">
              <el-input
                v-model="formData.manager_name"
                :disabled="true"
                autocomplete="off"
                placeholder="请输入管家名称"
              ></el-input>
            </el-form-item>

            <el-form-item label="管家电话">
              <el-input
                v-model="formData.manager_phone"
                :disabled="true"
                autocomplete="off"
                placeholder="请输入管家电话"
              ></el-input>
            </el-form-item>

            <el-form-item label="租赁类型">
              <el-select
                v-model="formData.type_id"
                :disabled="formData.type_id == 4 && formMode == 'edit'"
                placeholder="请选择类型"
              >
                <el-option
                  v-for="item in formSelections.types"
                  :disabled="item.id == 4"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="押金">
              <el-input-number
                :disabled="formData.type_id == 4 && formMode == 'edit'"
                v-model="formData.deposit"
                :precision="2"
                :step="0.01"
                :min="0"
                autocomplete="off"
                placeholder="请输入押金"
              ></el-input-number>
            </el-form-item>

            <el-form-item :label="formData.type_id == 4 && formMode == 'edit'?'日租费用':'价格'">
              <el-input-number
                :disabled="formData.type_id == 4 && formMode == 'edit'"
                v-model="formData.amount"
                :precision="2"
                :step="0.01"
                :min="0"
                autocomplete="off"
                placeholder="请输入价格"
              ></el-input-number>
            </el-form-item>

            <el-form-item label="租房时间">
              <el-date-picker
                v-model="formData.create_time"
                :disabled="formData.type_id == 4 && formMode == 'edit'"
                type="date"
                placeholder="请选择租房时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="退房状态">
              <el-select v-model="formData.check_out" :disabled="true" placeholder="请选择状态">
                <el-option
                  v-for="item in formSelections.check_out"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="退房时间">
              <el-date-picker
                v-model="formData.refund_time"
                :disabled="true"
                type="date"
                placeholder="请选择到期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="退房说明">
              <el-input
                type="textarea"
                v-model="formData.refund_desc"
                :disabled="true"
                autocomplete="off"
                rows="10"
                placeholder="请输入退房说明"
              ></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="房屋信息" name="second">
            <el-form-item label="检索房屋(房屋编号)">
              <el-autocomplete
                :disabled="formData.type_id == 4 && formMode == 'edit'"
                v-model="formData.search.house_no"
                :fetch-suggestions="searchHouse"
                placeholder="请输入房屋编号"
                @select="selectHouse"
              >
                <template slot-scope="{ item }">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.title"
                    placement="top-start"
                  >
                    <div class="name">{{ item.title }}</div>
                  </el-tooltip>
                  <span class="info">{{ item.house_no }}</span>
                </template>
              </el-autocomplete>
            </el-form-item>

            <div v-if="formData.house !== undefined">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="图片">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="formData.house.photo"
                      :preview-src-list="getPhotos(formData.house.photoList)"
                    ></el-image>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="标题">
                    <el-input
                      v-model="formData.house.title"
                      :disabled="true"
                      autocomplete="off"
                      placeholder="请输入标题"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="房屋编号">
                    <el-input
                      v-model="formData.house.house_no"
                      :disabled="true"
                      autocomplete="off"
                      placeholder="请输入房屋编号"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-form-item label="位置">
                  <el-col :span="8">
                    <el-select
                      v-model="formData.house.region_id"
                      placeholder="请选择"
                      :disabled="true"
                    >
                      <el-option
                        v-for="item in formSelections.region"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-col>

                  <el-col :span="16">
                    <el-input
                      v-model="formData.house.address_text"
                      style="width: 100%;"
                      :disabled="true"
                      autocomplete="off"
                      placeholder="详细地址"
                    ></el-input>
                  </el-col>
                </el-form-item>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="价格">
                    <el-input-number
                      :precision="2"
                      :step="0.01"
                      :min="0"
                      v-model="formData.house.amount"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="折扣价">
                    <el-input-number
                      :precision="2"
                      :step="0.01"
                      :min="0"
                      v-model="formData.house.discount_rate"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="面积">
                    <el-input-number
                      :precision="2"
                      :step="0.01"
                      :min="0"
                      v-model="formData.house.area"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="楼层">
                    <el-input
                      :min="1"
                      v-model="formData.house.floor"
                      :disabled="true"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="朝向">
                    <el-select
                      v-model="formData.house.orientation_id"
                      placeholder="请选择"
                      :disabled="true"
                    >
                      <el-option
                        v-for="item in formSelections.orientation"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="户型">
                    <el-select
                      v-model="formData.house.layout_id"
                      placeholder="请选择"
                      :disabled="true"
                    >
                      <el-option
                        v-for="item in formSelections.layout"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="轻轨线">
                    <el-select
                      v-model="formData.house.subway_line_id"
                      multiple
                      placeholder="请选择"
                      :disabled="true"
                    >
                      <el-option
                        v-for="item in formSelections.subwayLine"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="配套设置">
                    <el-select
                      v-model="formData.house.infrastructure_id"
                      multiple
                      placeholder="请选择"
                      :disabled="true"
                    >
                      <el-option
                        v-for="item in formSelections.infrastructure"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="标签">
                    <el-select
                      v-model="formData.house.tags"
                      multiple
                      placeholder="请选择"
                      :disabled="true"
                    >
                      <el-option
                        v-for="item in formSelections.tag"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="租赁方式">
                    <el-select
                      v-model="formData.house.type_id"
                      multiple
                      placeholder="请选择"
                      :disabled="true"
                    >
                      <el-option
                        v-for="item in formSelections.houseType"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-form-item label="状态">
                  <el-select v-model="formData.house.status" placeholder="请选择" :disabled="true">
                    <el-option
                      v-for="item in formSelections.houseStatusList"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-row>

              <el-form-item label="描述">
                <el-input
                  type="textarea"
                  v-model="formData.house.desc"
                  autocomplete="off"
                  :disabled="true"
                  placeholder="请输入描述内容"
                ></el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="账单" name="third" v-if="formData.bill.length > 0">
            <el-table :data="formData.bill" height="300" border style="width: 100%">
              <el-table-column prop="name" label="类型" width="150"></el-table-column>
              <el-table-column label="金额" width="240">
                <template slot-scope="scope">
                  <el-input-number
                    :disabled="true"
                    v-model="scope.row.amount"
                    :precision="2"
                    :step="0.01"
                    :min="0"
                    autocomplete="off"
                    placeholder="请输入金额"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="time" label="日期">
                <template slot-scope="scope">
                  <el-date-picker
                    :disabled="true"
                    v-model="scope.row.time"
                    type="date"
                    placeholder="请选择日期"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formDialogIsVisible = false">取 消</el-button>
        <el-button v-if="selectRow && selectRow.check_out != 2" type="primary" @click="save">退 房</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime, addMonth } from "@/utils/index";
import {
  getStatusList as getHouseStatusList,
  fetchList as getHouseList
} from "@/api/house";
import { fetchList as getUserList } from "@/api/user";
import { fetchList, getTypes, refund } from "@/api/userHouseRefund";
import * as houseType from "@/api/houseType";
import * as layout from "@/api/layout";
import * as infrastructure from "@/api/infrastructure";
import * as orientation from "@/api/orientation";
import * as region from "@/api/region";
import * as tag from "@/api/tag";
import * as subwayLine from "@/api/subwayLine";
import Pagination from "@/components/Pagination";

export default {
  name: "user_house",
  components: { Pagination },
  data() {
    return {
      //  tab切换标志
      activeTab: "first",
      list: null,
      total: 0,
      page: 1,
      pageSizes: [10, 20, 30],
      listLoading: true,
      dateRange: null,
      selectRow: null,
      listQuery: {
        offset: 0,
        limit: 10,
        filter: {
          "user.nickname": null,
          "user_house.type_id": null,
          "house.house_no": null,
          "user_house.refund_time": null,
          "user_house.check_out": 1
        },
        options: {
          "user.nickname": "like",
          "house.house_no": "like",
          "user_house.refund_time": "BETWEEN",
          "user_house.type_id": "=",
          "user_house.check_out": "="
        }
      },
      formDialogIsVisible: false,
      formMode: "add",
      formData: {
        id: undefined,
        amount: undefined,
        deposit: undefined,
        house_id: undefined,
        type_id: undefined,
        user: undefined,
        bill: [],
        user_id: undefined,
        manager_name: undefined,
        manager_phone: undefined,
        create_time: undefined,
        expire_time: undefined,
        search: {
          username: undefined,
          house_no: undefined
        },
        house: {
          id: undefined,
          title: undefined,
          house_no: undefined,
          photoList: [],
          type_id: [],
          layout_id: undefined,
          amount: 0.0,
          discount_rate: 1,
          region_id: 1,
          area: 0,
          status: undefined,
          floor: 1,
          address_text: undefined,
          tags: [],
          infrastructure_id: [],
          longitude: undefined,
          latitude: undefined,
          orientation_id: undefined,
          subway_line_id: [],
          desc: undefined
        }
      },
      formSelections: {
        tag: [],
        houseType: [],
        layout: [],
        infrastructure: [],
        orientation: [],
        region: [],
        subwayLine: [],
        houseStatusList: [],
        types: []
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  computed: {
    dialogTitle() {
      return this.formMode === "add" ? "新增" : "编辑";
    }
  },
  created() {
    this.getList();
    this._initData();
  },
  methods: {
    selectHouse(house) {
      if (house.photoList.length > 0) house.photo = house.photoList[0].url;
      this.formData.house_id = house.id;
      this.formData.house = Object.assign({}, house);
      this.formData.search.house_no = "";
    },
    async searchHouse(searchText, callback) {
      let houseData = await getHouseList({
        offset: 0,
        limit: 10,
        filter: {
          "house.house_no": searchText
        },
        options: {
          "house.house_no": "like"
        }
      });
      callback(
        houseData.data.list.map(item => {
          item.value = item.title;
          return item;
        })
      );
    },
    statusFormat(status) {
      let text = "未知";
      this.formSelections.types.forEach(item => {
        if (parseInt(item.id) === status) text = item.title;
      });
      return text;
    },
    getPhotos(photos) {
      return photos.map(item => {
        return item.url;
      });
    },
    async _initData() {
      this.formSelections.check_out = [
        {
          id: 1,
          title: "申请中"
        },
        {
          id: 2,
          title: "已退房"
        }
      ];
      let searchQuery = {
        infinite: true
      };
      let houseTypeList = await houseType.fetchList(searchQuery);
      let layoutList = await layout.fetchList(searchQuery);
      let infrastructureList = await infrastructure.fetchList(searchQuery);
      let orientationList = await orientation.fetchList(searchQuery);
      let regionList = await region.fetchList(searchQuery);
      let tagList = await tag.fetchList(searchQuery);
      let subwayLineList = await subwayLine.fetchList(searchQuery);
      let houseStatusList = await getHouseStatusList();
      let types = await getTypes();

      this.formSelections.houseStatusList = houseStatusList.data;
      this.formSelections.types = types.data;
      this.formSelections.layout = layoutList.data.list;
      this.formSelections.houseType = houseTypeList.data.list;
      this.formSelections.infrastructure = infrastructureList.data.list;
      this.formSelections.orientation = orientationList.data.list;
      this.formSelections.region = regionList.data.list;
      this.formSelections.tag = tagList.data.list;
      this.formSelections.subwayLine = subwayLineList.data.list;
    },
    pageChange(data) {
      this.page = data.page;
      this.listQuery.limit = data.limit;
      this.listQuery.offset = (this.page - 1) * this.listQuery.limit;
      this.refresh(false);
    },
    openDialog(row) {
      this.activeTab = "first";
      this.selectRow = row;
      if (row === null) {
        this.formMode = "add";
        this.formData = {
          id: undefined,
          amount: 0.0,
          deposit: 0.0,
          bill: [],
          house_id: undefined,
          type_id: 1,
          user: undefined,
          user_id: undefined,
          manager_name: undefined,
          manager_phone: undefined,
          create_time: undefined,
          expire_time: undefined,
          check_out: undefined,
          refund_time: undefined,
          refund_desc: undefined,
          search: {
            house_no: undefined
          },
          house: undefined
        };
      } else {
        this.formMode = "edit";
        let house = row.house;
        this.formData = {
          id: row.id,
          amount: row.amount,
          deposit: row.deposit,
          house_id: row.house_id,
          type_id: row.type_id,
          user: Object.assign({}, row.user),
          user_id: row.user_id,
          manager_name: row.manager_name,
          manager_phone: row.manager_phone,
          create_time: row.create_time,
          expire_time: row.expire_time,
          check_out: row.check_out,
          refund_time: row.refund_time,
          refund_desc: row.refund_desc,
          search: {
            house_no: undefined
          },
          house: {
            title: house.title,
            house_no: house.house_no,
            photoList: Object.assign([], house.photoList),
            photo: house.photoList[0].url,
            type_id: house.type_id,
            layout_id: house.layout_id,
            amount: house.amount,
            discount_rate: house.discount_rate,
            region_id: house.region_id,
            area: house.area,
            status: house.status,
            floor: house.floor,
            address_text: house.address_text,
            tags: house.tags,
            infrastructure_id: house.infrastructure_id,
            longitude: house.longitude,
            latitude: house.latitude,
            orientation_id: house.orientation_id,
            subway_line_id: house.subway_line_id,
            desc: house.desc
          }
        };
        setTimeout(() => {
          this.formData.bill = row.bill;
        }, 500);
      }
      this.formDialogIsVisible = true;
    },
    save() {
      let promise;
      this.listLoading = true;
      let formData = this.formData;
      promise = refund(formData);
      promise
        .then(() => {
          this.refresh();
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    searchData() {
      this.refresh(true);
    },
    refresh(isAll = false) {
      console.log(this.listQuery);
      this.formDialogIsVisible = false;
      this.listLoading = false;
      if (isAll) {
        this.page = 1;
      }
      this.getList();
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery)
        .then(response => {
          let { data } = response;
          this.list = data.list;
          this.total = response.data.count;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    _computedBill() {
      let formData = this.formData;
      if (
        formData.type_id &&
        formData.amount &&
        formData.deposit &&
        formData.create_time &&
        this.formDialogIsVisible === true
      ) {
        let name,
          diffTime,
          price,
          count,
          data = [];
        switch (formData.type_id) {
          case 1:
            name = "第%s期";
            count = 12;
            price = formData.amount;
            diffTime = 1;
            break;
          case 2:
            name = "第%s期";
            count = 4;
            price = formData.amount * 3;
            diffTime = 3;
            break;
          case 3:
            name = "年付";
            count = 1;
            price = formData.amount * 12;
            diffTime = 12;
            break;
        }

        data.push({
          name: "押金",
          amount: formData.deposit,
          time: parseTime(formData.create_time, "{y}-{m}-{d}")
        });

        for (let i = 0; i < count; i++) {
          data.push({
            name: name.replace("%s", i + 1),
            amount: price,
            time: parseTime(
              addMonth(
                new Date(Date.parse(formData.create_time)),
                diffTime * i
              ),
              "{y}-{m}-{d}"
            )
          });
        }

        this.formData.bill = data;
      }
    }
  },
  watch: {
    dateRange: function(newValue, oldValue) {
      if (!newValue || newValue.length == 0) {
        this.listQuery.filter["user_house.expire_time"] = null;
      } else {
        this.listQuery.filter["user_house.expire_time"] =
          newValue[0] + "," + newValue[1];
      }
    },
    page: function(newValue, oldValue) {
      this.listQuery.offset = (newValue - 1) * this.listQuery.limit;
    },
    "formData.amount": function(newValue, oldValue) {
      if (newValue) this._computedBill();
    },
    "formData.deposit": function(newValue, oldValue) {
      if (newValue) this._computedBill();
    },
    "formData.type_id": function(newValue, oldValue) {
      if (newValue) this._computedBill();
    },
    "formData.create_time": function(newValue, oldValue) {
      if (newValue && this.formData.type_id != 4) {
        this._computedBill();
        this.formData.expire_time = parseTime(
          addMonth(new Date(Date.parse(this.formData.create_time)), 12),
          "{y}-{m}-{d}"
        );
      }
    }
  }
};
</script>
<style lang="scss">
.photos-uploader {
  .el-upload-list__item {
    width: 140px;
    height: 105px;
  }

  .el-upload.el-upload--picture-card {
    width: 140px;
    height: 105px;
    line-height: 105px;
  }
}

.name {
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info {
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  color: #ccc;
}

.map_container {
  width: 100%;
  position: relative;
  height: 480px;
  display: table;
}
</style>
